<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-12 14:20:18
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-25 10:26:18
 * @FilePath: \smart-community\src\components\BoxTitleInLeft\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="box1">
    <div class="title_box">
      <div class="left_icon">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="title">{{ title }}</div>
      <div class="right_icon">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="container">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script setup name="BoxTitleInLeft">
defineOptions({
  name: "BoxTitleInLeft",
});
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "标题",
  },
  subTitle: {
    type: String,
    default: "副标题",
  },
});
</script>

<style lang="scss" scoped>
.box1 {
  height: 100%;
  @include display(flex-start, center, column);

  .title_box {
    @include display(flex-start, center, row);
    width: 100%;
    height: 88px;
    background-size: 100% 100% !important;
    position: relative;
    color: #fff;
    .title {
      font-size: 36px;
      font-family: Microsoft YaHei, Microsoft YaHei-Light;
      color: #ffffff;
      margin: 0 20px;
    }
    .left_icon {
      @include display(center, center, row);
      div {
        margin: 0 4px;
        width: 13px;
        height: 26px;
        transform: skew(-45deg);
      }
      div:nth-of-type(1) {
        background: rgba(26, 240, 239, 0.3);
      }
      div:nth-of-type(2) {
        background: rgba(26, 240, 239, 0.6);
      }
      div:nth-of-type(3) {
        background: rgba(26, 240, 239, 1);
      }
    }
    .right_icon {
      @include display(center, center, row);
      div {
        margin: 0 4px;
        width: 13px;
        height: 26px;
        transform: skew(45deg);
      }
      div:nth-of-type(1) {
        background: rgba(26, 240, 239, 1);
      }
      div:nth-of-type(2) {
        background: rgba(26, 240, 239, 0.6);
      }
      div:nth-of-type(3) {
        background: rgba(26, 240, 239, 0.3);
      }
    }
  }

  .container {
    flex-grow: 1;
    height: 0;
    width: 100%;
  }
}
</style>
